<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise-all</title>
  </head>
  <body>
    <div></div>
    <script>
      //1、Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
      //Promise.all中传入的是数组，返回的也是是数组，并且会将进行映射，传入的promise对象返回的值是按照顺序在数组中排列的，但是注意的是他们执行的顺序并不是按照顺序的
      function promiseFn1() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            resolve("成功数据1")
          }, 2000)
        })
        return p
      }
      function promiseFn2() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            resolve("成功数据2")
          }, 2000)
        })
        return p
      }
      function promiseFn3() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            reject("失败数据3")
          }, 2000)
        })
        return p
      }
      Promise.all([promiseFn1(), promiseFn2()])
        .then((result) => {
          console.log(result) //['成功数据1', '成功数据2']
        })
        .catch((error) => {
          console.log(error)
        })

      Promise.all([promiseFn1(), promiseFn2(), promiseFn3()])
        .then((result) => {
          console.log(result)
        })
        .catch((error) => {
          console.log(error) //失败数据3
        })

      //应用 Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。
    </script>
  </body>
</html>
